<template>
  <div class="bar-right-index" id="barRight"></div>
</template>

<script>
export default {
  mounted() {
    this.drawLineLeft();
  },
  methods: {
    drawLineLeft() {
      var myChart = this.$echarts.init(document.getElementById("barRight"));
      // var valdata = [702, 350, 610, 793, 664];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      var option = {
        title: {
          text: "World Population",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "12%",
          right: "12%",
          bottom: "3%",
          // containLabel: false,
        },

        xAxis: {
          // 不显示X轴的相关信息
          show: false,
        },
        yAxis: [
          {
            type: "category",
            // 数据翻转 data
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示Y轴的线
            axisLine: {
              show: "false",
            },
            // 不显示Y轴相关的线和刻度
            axisTick: {
              show: false,
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff",
            },
          },
          // 因为Y轴的右侧也有数据标签 所以Y轴立面有2个对象
          {
            type: "category",
            inverse: true,
            data: ["702", "350", "610", "793", "664"],
            // 不显示Y轴的线
            axisLine: {
              show: "false",
            },
            // 不显示Y轴相关的线和刻度
            axisTick: {
              show: false,
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        series: [
          // 第一个对象
          {
            name: "2011",
            type: "bar",
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color可以修改柱子的颜色
              // params 打印出来就是六个柱子的对象,每个对象里面都有一个索引号
              color: function (params) {
                // console.log(params)dataIndex当前柱子的索引号
                return myColor[params.dataIndex];
              },
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // （c）会自动解析为data里面的数据{a}是系列名、{b是数据名}、{c}是数据值
              formatter: "{c}%",
            },
          },
          // 就是第二组那个框框的样式修改
          // 第二组柱子 框框的
          {
            name: "2012",
            type: "bar",
            barCategoryGap: 50,
            // yAxisIndex上面那个是0  所以下面这个对象的框框包住上面的那个
            yAxisIndex: 1,
            barWidth: 15,
            // 在开发中  这里是通过接口调过来的
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              // color为none  就没有条条了 就是框框
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15,
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 让图标跟着屏幕去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
.bar-right-index {
  width: 100%;
  height: 100%;
}
</style>
